<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示示例</title>

    <!--bootstrap-->
    <link rel="stylesheet" href="/mhg/css/bootstrap.min.css">
    <script src="/mhg/js/jquery.min.js"></script>
    <script src="/mhg/js/popper.min.js"></script>
    <script src="/mhg/js/bootstrap.min.js"></script>

    <!--引入axios框架-->
    <script src="/mhg/js/axios.min.js"></script>
    <!--引入Vue框架-->
    <script src="/mhg/js/vue.js"></script>

</head>
<body>

    <div class="container">
        <h2>鼠标悬停效果 - 天蓝色背景表格</h2>
        <p>联合使用 .table-primary 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：</p>
        <table id="table1" class="table table-primary table-hover">
            <thead>
                <tr>
                    <th>电影名称</th>
                    <th>电影封面图片</th>
                    <th>类型名称</th>
                    <th>制片国家</th>
                    <th>年代名称</th>
                    <th>语言</th>
                    <th>上映日期</th>
                    <th>片长</th>
                    <th>电影别名</th>
                    <th>出品方</th>
                    <th>剧情介绍</th>
                    <th>电影原声推广曲</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="movie in movies_arr">
                    <td>{{movie.name}}</td>
                    <td><img :src="movie.imagePath" width="80px" height="80px"></td>
                    <td>{{movie.kindName}}</td>
                    <td>{{movie.regionName}}</td>
                    <td>{{movie.yearsName}}</td>
                    <td>{{movie.language}}</td>
                    <td>{{movie.screenDate}}</td>
                    <td>{{movie.length}}</td>
                    <td>{{movie.alias}}</td>
                    <td>{{movie.produce}}</td>
                    <td>{{movie.plotIntroduction}}</td>
                    <td><embed :src="movie.movieSong" width="200px" height="80px"></td>
                </tr>
            </tbody>
        </table>
    </div>
​
    <!--引入自己的脚本-->
    <script src="/mhg/js/mhg.js"></script>

</body>
</html>
